<template>
	<div  @click="showAnchor($event)">
		<div class="flex car-info">
			<div class="car-name">
				<div>车型名称</div>
				<div>1/2</div>	
			</div>
				<template>					
					<div class="flex-item car-item" v-if="truckParamInfo.truckInfo && truckParamInfo.truckInfo.id">
						<p>{{truckParamInfo.truckInfo && truckParamInfo.truckInfo.name}}</p>
						<i class="del-car" @click="del(0)">&times;</i>
					</div>

					<div @click="jump(0)" :to="{path:'/series/list',query:{series_id,brandid,truck_info_id}}" class="flex-item car-item block" v-else>
						<i class="iconfont fs40">&#xe600;</i>
						<div>加入车型</div>
					</div>
				</template>
				<template>					
					<div class="flex-item car-item" v-if="compare_truckInfo.truckInfo && compare_truckInfo.truckInfo.id">
						<p>{{compare_truckInfo.truckInfo && compare_truckInfo.truckInfo.name}}</p>
						<i class="del-car" @click="del(1)">&times;</i>
					</div>

					<div @click="jump(1)" :to="{path:'/series/list',query:{series_id,brandid,truck_info_id}}" class="flex-item car-item block" v-else>
						<i class="iconfont fs40">&#xe600;</i>
						<div>加入车型</div>
					</div>
				</template>
				
		</div>
		<detailItem :truckParamInfo="truckParamInfo.params" :compareTruckInfo="compare_truckInfo.params"></detailItem>
		<div class="category">
			<div data-type="1">				
				<span class="iconfont mr5" data-type="1">&#xe60d;</span>分类
			</div>
			<ul class="anchor-list" v-if="isAnchorShow">
				<li v-for="(item,index) in group_name_arr" ><a href="#" v-scroll-to="'#element' + index">{{item}}</a></li>
			</ul>
		</div>
		<scrollTop></scrollTop>
	</div>
</template>

<script>
	import detailItem from '../../base/detailItem.vue'
	import scrollTop from '../../base/scrollTop.vue'
	import { mapActions, mapGetters } from 'vuex'
	import Vue from 'vue'
	import VueScrollTo from 'vue-scrollto'
	Vue.use(VueScrollTo)
	export default {
		components:{
			detailItem,
			scrollTop
		},
		data () {
			return {
				truck_info_id:'',	
				isAnchorShow:false			
			}
		},
		computed:{
			...mapGetters('detail',[
				'truckParamInfo',
				'compare_truckInfo',
				'series_id',
				'brandid',
				'group_name_arr'
			])
		},
		methods:{
			...mapActions('detail',[
				'getTruckParamInfo'
			]),
			del(index) {
				this.$store.commit('detail/EMPTYTRUCKPARAMINFO',index);
				var compare_id = this.$route.query.compare_id.split('_');
				var query = {
					id:this.truck_info_id
				};
				if(index == 0) {
					query.compare_id = '_' + compare_id[1]
					this.$parent.compare_id = '_' + compare_id[1]
				}else {
					query.compare_id = compare_id[0] + '_'
					this.$parent.compare_id = compare_id[0] + '_'
				}
				this.$router.replace({path:'/detail/config',query:query})
			},
			jump (index) {
				var query = {
					series_id:this.series_id,
					brandid:this.brandid,
					truck_info_id:this.truck_info_id
				}
				var compare_id = ( this.$route.query.compare_id && this.$route.query.compare_id.split('_') )|| [];
				if(compare_id.length > 0 && index == 0) {
					query.compare_id = '_' + compare_id[1]
				}else {
					query.compare_id = compare_id[0] + '_'
				}
				this.$router.push({path:'/series/list',query:query})
			},
			showAnchor(e){
				if(e.target.dataset.type == 1) {
					this.isAnchorShow = !this.isAnchorShow
				}else {
					this.isAnchorShow = false
				}
			}
		},
		mounted(){
			this.$store.commit('detail/RESETTRUCKPARAMINFO');
			this.truck_info_id = this.$route.query.id;
			this.compare_id = this.$route.query.compare_id;
			if(this.compare_id) {
				this.compare_id.split('_').forEach((item,index) => {
					if(item) {
						this.getTruckParamInfo({truck_info_id:item,type:index})
					}
				})
			}else {				
				this.getTruckParamInfo({truck_info_id:this.truck_info_id,type:0}).then((data) =>{
					this.$parent.title = data.truckInfo.name
				})
			}
		}
	}
</script>

<style lang = 'scss' scoped>
	.category {
		position: fixed;
		right: 0;
		bottom: 3.6rem;
		width: 1.86667rem;
		height: 0.93333rem;
		line-height: 0.93333rem;
		text-align: center;
		border-radius: 0.48rem 0 0 0.48rem;
		background-color: #000;
		color: #FFF;
	}
	.anchor-list {
	    position: absolute;
	    left: -225px;
	    bottom: 0;
	    width: 210px;
	    background-color: rgba(0,0,0,.8);
	    border-radius: 5px;
	    font-size: 0;
	    &::after {
	    	content: '';
	    	position: absolute;
	    	right: -0.26667rem;
			width: 0; 
			height: 0; 
			border-top: 0.26667rem solid transparent; 
			border-left: 0.26667rem solid rgba(0,0,0,.8); 
			border-bottom: 0.26667rem solid transparent; 
	    }
	    li {
	    	display: inline-block;
	    	width: 50%;
	    	a {
	    		font-size: 0.32rem;
				color: #fff;
				display: inline-block;
				width: 100%;
	    	}

	    }
	}
	.fs40 {
		font-size: 1.06667rem;
	}
	.car-info {
		height: 3.33333rem;
		>div,a {
			border: 1px solid #f0f0f0; 
			text-align: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0.26667rem;
			color: #999;
		}
		.car-item {
			position: relative;
			.del-car {
				position: absolute;
				width: 0.64rem;
				height: 0.64rem;
				line-height: 0.64rem;
				text-align: center;
				border-radius: 0 0 0 20px;
				background-color: #ccc;
				top: 0;
				right: 0;
				color: #fff;
				font-size:0.53333rem;
			}
		}
		.car-name {
			width: 2.77333rem;
		}
	}
	/*。car-name */
</style>